
<template>
    <div>
        <el-tree
        node-key="id"
        :data="PermissionList"
        :props="prop"
        :load="loadNode"
        show-checkbox
        :default-checked-keys="values"
        default-expand-all
        ref="treeRef">
        </el-tree>
        <el-button plain style="margin-top: 10px; margin-left: 80%;" @click="handleBind">绑定</el-button>
    </div>
</template>

<script setup>
import { ref,reactive } from 'vue'
import { get,post } from '@/plugins/axios';
const PermissionList = ref([])
const values = ref([])
const treeRef = ref(null)
const emits = defineEmits(['updata:show'])
const props = defineProps(['roleId'])
const prop = reactive({
  label: 'name',
  key:'id',
  children: 'children'
})
getPermissionList()
function getPermissionList(){
    get('/rolePermission/getData',{roleId:props.roleId},content => {
        PermissionList.value = content.permissionList    
         for(const i in content.rolePermissionList){
             values.value.push(content.rolePermissionList[i].permissionId)
            }   
        console.dir(PermissionList.value)
        console.dir(values.value)
    })
}
function handleBind(){
    const checkedNodes = treeRef.value.getCheckedNodes(false, true);  
    const checkedIds = checkedNodes.map(node => node.id);  
    const checkedTypes = checkedNodes.map(node => node.type);
    post("/rolePermission/add",{PermissionIds:checkedIds,PermissionTypes:checkedTypes,roleId:props.roleId},content => {
        emits('update:show', false)
    })
}
</script>

<style>

</style>